<template>
  <el-form ref="formEle" :model="form" :rules="rules" label-width="100px" class="formContent">
    <el-form-item label="用户名" class="paddingLocation">
      <el-input placeholder="请输入用户名" v-model="form.name" class="formName"></el-input>
    </el-form-item>
    <el-form-item label="真实姓名" class="paddingLocation" prop="realname">
          <el-input placeholder="请输入真实姓名"  v-model="form.realname" class="formRealName"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" class="paddingLocation" prop="email">
      <el-input placeholder="请输入邮箱"   v-model="form.email" class="formEmail"></el-input>
    </el-form-item>
    <el-form-item label="手机号" class="paddingLocation" prop="phonenum">
      <el-input placeholder="请输入手机号" v-model="form.phonenum" class="formPnum"></el-input>
    </el-form-item>
    <el-form-item label="密码" class="paddingLocation">
      <el-input placeholder="请输入密码"  v-model="form.pwd" show-password  class="formPwd" ></el-input>
    </el-form-item>
    <el-form-item label="再次输入密码" class="paddingLocation" prop="nextpwd">
      <el-input placeholder="请再次输入密码"  v-model="form.nextpwd" show-password  class="SformPwd" ></el-input>
    </el-form-item>
    <el-form-item label="性别" class="paddingLocation" prop="resource">
      <el-radio-group v-model="form.resource">
        <el-radio  label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item class="paddingLocation submitBox">
      <el-button type="primary" @click="onSubmit('formEle')" class="submitBtn" size="medium">注册</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      let [regName,regEmail,regPnum] = [ /(^[\u4E00-\u9FA5]{2,4}$)/,
        /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
        /(^[1][3,4,5,7,8][0-9]{9}$)/];

      let testSumFn = (regname,str) => {
        return (rule,value,callback) => {
          if (regname.test(value) === true) {
            this.$message({
              message: str+'填写正确',
              type: 'success'
            });
            callback();
          }else{
            callback(new Error('请填写准确格式的'+str+'!'))
          }
        }
      }
      let [testRealNameFn,testEmailFn,testPhonenumFn] = [testSumFn(regName,'真实姓名'),testSumFn(regEmail,'邮箱'),testSumFn(regPnum,'邮箱')];

      let testNextPwdFn = (rule,value,callback) => {
        if (this.pwd === this.nextpwd ) {
          this.$message({
            message: '密码填写正确',
            type: 'success'
          });
          callback();
        }else{
          callback(new Error('请确认密码是否填写正确！'))
        }
      }
      return {
        form: {
          name: '',
          realname:'',
          pwd: '',
          nextpwd:'',
          email:'',
          phonenum:'',
          resource:'男'
        },
        rules: {
          realname: [
            { validator: testRealNameFn, trigger: 'blur' }
          ],
          nextpwd:[
            { validator: testNextPwdFn, trigger: 'blur' }
          ],
          email:[
            { validator: testEmailFn, trigger: 'blur' }
          ],
          phonenum:[
            { validator: testPhonenumFn, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      onSubmit(ele) {
        this.$refs[ele].validate((valid) => {
          if (valid) {
            //发送请求
            //this.$http.post(url,data).then((res) => {},(err) => {});
            console.log('submit!');
          }else{
            this.$message.error('请填写所需要的信息');
            return false;
          }
      })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .paddingLocation{
    padding: 0 0 0 60px;
  }
  .formContent{
    margin-top: 75px;
  }
  .formName,.formPwd,.formRealName,.SformPwd,.formEmail,.formPnum{
    width: 300px;
  }
  .submitBtn{
    width: 200px;
    font-size: 16px;
    margin-left: 30px;
  }
  .el-form-item:nth-of-type(7){
    margin-bottom: 18px;
  }
</style>
